<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css" >
    <link rel="stylesheet" href="../vendor/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="../imgs/favicon.ico" />
    <link rel="bookmark" href="../imgs/favicon.ico" />
    <style>
        /* 常用CSS */
        .ingridSkin .clear{
            outline: none;
            list-style: none;
            padding: 0;
            margin: 0;
            border: 0;
            border-radius: 0;
        }
        .ingridSkin .hidden{
            display: none;
        }

        /* 总体布局 */
        #app{
            display: -webkit-flex; /* Safari */
            display: flex;
            width: 100%;
            position: relative;
            background: rgb(245,245,245);
            height: 100vh;
            font-size: 14px;
        }
        .ingridSkin #dataArea{
            justify-content: flex-start;
            background: rgb(245,245,245);
            width: 100%;
            max-width: 800px;
            margin: 5px 5px 0 5px;
            padding: 0;
            border-left: 0;
            overflow: hidden;
        }
        .ingridSkin #optionArea{
            background: rgb(245,245,245);
            right:0;
            position: absolute;
            justify-content: flex-end ;
            width: 100%;
            max-width: 768px;
            padding: 0;
            border: 5px solid rgb(245,245,245);
            border-bottom: 0;
            overflow: hidden;
            z-index: 10;
        }
        
        /* card类 */
        .ingridSkin .app-card{
            background: transparent;
        }

        /* 头部 */
        .ingridSkin .app-header{
            border: 0;
            border-radius: 5px 5px 0 0 ;
            background: rgb(0,147,234);
            height: 40px;
            padding: 5px 10px;
            color: #ffffff;
            font-weight: bold;
            line-height: 30px;
            position: relative;
            font-size: 14px;
        }

        /* 功能区域 */
        .ingridSkin .btn-group{
            position: absolute;
            border: 0;
            top: 5px;
            right: 10px;
            height: 40px;
            line-height: 30px;
            color: #ffffff;
            font-weight: bold;
            line-height: 30px;
            z-index: 1
        }
        
        /* 搜索 */
        .ingridSkin .app-search{
            margin-right: 10px;
        }
        .ingridSkin .app-searchcontent{
            background: transparent;
            height: 30px;
            line-height: 30px;
            width: 180px;
            color: rgb(255,255,255);
            border-bottom: 1px solid rgb(255,255,255);
            padding: 0 10px;
            font-size: 14px;
        }
        .ingridSkin .app-searchcontent::-webkit-input-placeholder {
            color: rgb(255,255,255,0.5);
         }
        .ingridSkin .app-searchbutton{
            background: transparent;
            height: 30px;
            line-height: 30px;
            width: 30px;
            color: rgb(255,255,255);
        }
        
        /* 扩展菜单 */
        .ingridSkin .app-topbutton{
            background: transparent;
            height: 30px;
            line-height: 30px;
            color: rgb(255,255,255);
        }
        .ingridSkin .app-topmenu{
            box-shadow: 3px 3px 3px rgb(245,245,245);
            z-index: 90;
        }
        .ingridSkin .dropdown-item{
           font-size: 14px;
           font-weight: normal;
        }

        /* 列表 */
        .ingridSkin .app-body{
            height: calc(100vh - 85px);
            background: rgb(245,245,245)
        }

        .ingridSkin .app-body .list-group-item{
            margin-top: 5px;
            padding: 5px 10px;
            background: rgb(255,255,255)
        }

        .ingridSkin .app-rowselect{
            display: inline-block;
            font-size: 20px;
            color:rgb(245,245,245);
            vertical-align:middle;
            cursor: pointer;

        }

        /* 底部工具栏 */
        .ingridSkin .app-footer{
            border: 0;
            background: rgb(250,251,254);
            height: 40px;
            color: rgb(131,131,131);
            line-height: 30px;
            border-top: 1px solid rgb(235,235,235);
            border-radius: 0 0 5px 5px;
            padding: 0 20px;
        }

        .ingridSkin .app-footerbutton{
            border: 0;
            border-radius:25px;   
            background: rgb(0,147,234);
            height: 25px;
            padding: 5px 5px;
            color: rgb(255,255,255);
            line-height: 1;
            margin: 5px 5px 0 5px ;
            width: 25px;
            font-size: 14px;
        }


        .ingridSkin .darkbackground{
            background: rgb(3,44,79);
        }
        .ingridSkin .normalbackground{
            background: rgb(235,235,235);
        }
        .ingridSkin .whitebackground{
            background: rgb(255,255,255);
        }
        .ingridSkin .txtright{
            text-align: right;
        }
        .ingridSkin .selected{
            color: rgb(0,147,234);
        }
        .ingridSkin .dark{
            color: rgb(3,44,79);
        }
        .nicescroll-cursors{
            z-index: 999;
        }

    </style>
</head>
<body>
    <div id="app" class="ingridSkin">
        <div id="dataArea">
            <!-- <div class="top">
                <div class="title">
                    <span>销售订单列表</span>
                </div>
                <div class="search">
                    
                </div>
            </div>
            <div class="tab">
                s
            </div>
            <div id="list-content">
                s
            </div> -->
            <div class="card clear app-card">
                <div class="card-header clear app-header">
                    销售订单列表
                    <div class="btn-group clear">
                        <div class="input-group app-search">
                            <input type="text" class="form-control clear app-searchcontent" placeholder="请输入搜索关键字" >
                            <button class="btn clear app-searchbutton" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                        <button type="button" class="btn clear app-topbutton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-th-large" aria-hidden="true"></i>
                        </button>
                        
                        <div class="dropdown-menu dropdown-menu-right clear app-topmenu">
                            <button class="dropdown-item" type="button">筛选</button>
                            <button class="dropdown-item" type="button">高级查询</button>
                            <button class="dropdown-item" type="button">测试</button>
                        </div>
                        
                    </div>
                </div>
                <div id="dataAreaBody" class="card-body clear app-body">                    

                    <ul v-if="listData && listData.length > 0 " class="list-group clear">
                        <!-- <li class="list-group-item clear">
                            <button v-on:click="optionChange(true);">测试</button></li> -->
                        <li v-for="list in listData" class="list-group-item clear">
                        
                            <div class="row clear" >
                                <div class="clear col-1 ">
                                        <i class="app-rowselect fa fa-check-circle selected" aria-hidden="true"></i>
                                </div>
                                <div class="clear col-11">
                                        {{list.xiaosTitleID}}
                                        {{list.cankNo}}
                                        {{list.xiaosNo}}
                                        {{list.kehCode}}
                                        {{list.kehName}}
                                        {{list.dingjSum}}
                                        {{list.chukStatusName}}
                                        {{list.xiaosSum}}
                                        {{list.zongSum}}
                                        {{list.shendSum}}
                                        {{list.qitSum}}
                                        {{list.shelSum}}
                                        {{list.dinghDate}}
                                        {{list.yewOrgName}}
                                        {{list.shouhMan}}
                                        {{list.shouhTel}}
                                        {{list.shouhAddress}}
                                        {{list.province}}
                                        {{list.city}}
                                        {{list.county}}
                                        {{list.yuansdStatus}}
                                        {{list.xiaosStatusName}}
                                        {{list.guaqStatus}}

                                        {{list.dingdRemark}}
                                        {{list.songhfsName}}
                                        {{list.xiaosCancelFlag}}
                                        {{list.guaqStatusName}}
                                        {{list.songhFlag}}
                                        {{list.dingdPrintFlag}}
                                        {{list.tuihTitleID}}
                                        {{list.yiydbSum}}
                                        {{list.xxxxTel}}
                                        {{list.fuwfName}}
                                        {{list.hebFahFlag}}
                                        {{list.jiaoyzt}}
                                   			
                                </div>
                            </div>
                        </li>
                        <!-- <li  class="list-group-item clear">
                                <div class="row clear" >
                                    <div class="clear col-1">
                                            <i class="app-rowselect fa fa-circle" aria-hidden="true"></i>
                                    </div>
                                    <div class="clear col-11">
                                            
                                    </div>
                                </div>
                        </li>
                        <li class="list-group-item clear">Porta ac consectetur ac</li>
                        <li class="list-group-item clear">Vestibulum at eros</li> -->
                    </ul>
                    <ul v-else class="list-group clear">
                            <li class="list-group-item clear">
                            
                                <div class="row clear" >
                                    <div class="clear col-1 ">
                                    </div>
                                    <div class="clear col-11">
                                            没有获取到数据
                                    </div>
                                </div>
                            </li>
                        </ul>
                </div>
                <div class="card-footer clear app-footer">
                    <button type="button" class="btn clear app-footerbutton" v-on:click="optionChange(true);">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn clear app-footerbutton">
                        <i class="fa fa-trash"></i>
                    </button>
                    
                </div>
            </div>

            
        </div>
        <div id="optionArea" :class="optionStatus ? '':'hidden'">
            <div class="card-header clear app-header darkbackground">
                    操作界面
                </div>
                <div id="dataAreaBody" class="card-body clear app-body whitebackground">
                    <ul class="list-group clear">
                        <li class="list-group-item clear"><button v-on:click="optionChange(false);">测试</button></li>
                        <li class="list-group-item clear">Dapibus ac facilisis in</li>
                        <li class="list-group-item clear">Morbi leo risus</li>
                        <li class="list-group-item clear">Porta ac consectetur ac</li>
                        <li class="list-group-item clear">Vestibulum at eros</li>
                    </ul>
                </div>
                <div class="card-footer clear app-footer txtright normalbackground">
                        <button type="button" class="btn clear app-footerbutton darkbackground">
                            <i class="fa fa-plus " aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btn clear app-footerbutton darkbackground">
                            <i class="fa fa-trash "></i>
                        </button>
                </div>
        </div>
    </div>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../vendor/jquery/jquery2.2.4.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../vendor/popper.js/popper.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../vendor/vue/vue.js"></script>
    <script src="../vendor/jquery/jquery.nicescroll.min.js"></script>
    <script>
        var dataAreaBody = "#dataAreaBody";
        var vm = new Vue({
            el: "#app",
            data:{
                optionStatus:false,
                content:"",
                //列表数据
                listData:[],
                //参数
                param : {
                    methodName: "xiaosddLoad",
                    poolName: "erp",
                    in_yonghID:1,
                    in_xiaosNo:'',
                    in_cankNo:'' ,
                    in_kehName:'',
                    in_yewOrgID:'',
                    in_shouhMan:'',
                    in_shouhTel:'',
                    in_shouhAddress:'',
                    in_shangpCode:'',
                    in_songhfsName:'',
                    in_dinghDateStart:'2018-08-01',
                    in_dinghDateEnd:'2018-08-02',
                    in_dingdRemark:'',
                    in_dingdPrintFlag:255,
                    in_xiaosStatus:255,
                    in_guaqStatus:255 ,
                    in_xiaosCancelFlag:255,
                    in_chukStatus:255 ,
                    in_jiaoyStatusName:'' ,
                    in_buf:''	,
                    in_hebFlag:''	
                }
            },
            created:function(){
                this.queryList();
            },
            updated:function(){
                resize();
            },
            methods:{
                optionChange:function(optionStatus){
                    this.optionStatus = optionStatus;
                },
                fillContent:function(){
                },
                queryList:function(){
                    _this = this;
                    $.ajax({
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json",
                        url: "/method/execMethod", //for ASP.NET, java                                                
                        data: JSON.stringify(_this.param),
                        success: function (data) {
                            _this.listData = data.rows[0];
                        },
                        complete: function () {
                            
                        }
                    });
                }
            }
        });
        function resize(){
            $(dataAreaBody).getNiceScroll().resize();
        }
        $(function(){
            $(dataAreaBody).niceScroll({
			    touchbehavior:false,     //是否是触摸式滚动效果
			    cursorcolor:"#000",     //滚动条的颜色值
			    cursoropacitymax:0.2,   //滚动条的透明度值
			    cursorwidth:5,         //滚动条的宽度值
			    autohidemode:false,      //滚动条是否是自动隐藏，默认值为 true
			});
            $(dataAreaBody).niceScroll({
			    touchbehavior:false,     //是否是触摸式滚动效果
			    cursorcolor:"#000",     //滚动条的颜色值
			    cursoropacitymax:0.2,   //滚动条的透明度值
			    cursorwidth:5,         //滚动条的宽度值
			    autohidemode:false,      //滚动条是否是自动隐藏，默认值为 true
			});
        })
    </script>
</body>
</html>